<template>
  <view class="coupon">
    <view class="banner" />
    <view class="card">
      <h1>我的快乐券余额</h1>
      <p class="info">
        您还剩余<span class="count">{{ couponNumber }}</span>张快乐券
      </p>
      <view
        class="footer"
        @click="$refs.popupRef.show()"
      >
        什么是快乐券？
      </view>
    </view>
    <p class="title">
      我的账单
    </p>
    <ul
      v-for="(item,index) in list"
      :key="index"
      class="list"
    >
      <li>
        <view>
          <p class="font-weight-500 font-14">
            {{ item.title }}
          </p>
          <p class="color-999 font-12">
            {{ item.createTime }}
          </p>
        </view>
        <view class="green" :class="{red: item.type === 'SUB'}">
          {{ item.type === "ADD" ? "+" : "-" }}
          {{ item.number }}
          张快乐券
        </view>
      </li>
      <!-- <li>
        <view>
          <p class="font-weight-500 font-14">
            企业发放
          </p>
          <p class="color-999 font-12">
            2021.04.29
          </p>
        </view>
        <view class="green">
          +10张快乐券
        </view>
      </li> -->
    </ul>
    <popup-layer
      ref="popupRef"
      :direction="'top'"
      :show-pop="false"
    >
      <view class="question">
        <!-- <p class="tit">
          快乐券是什么？
        </p> -->
        <p style="margin-bottom:13px">
          1、快乐券是什么？
          <view class="index">
            快乐券是企业以发券模式给员工提供的福利，拒绝千篇一律，不是毫无新意的活动一张卡券连接全品类丰富的团建、休闲娱乐产品 给到员工实打实的优惠，供员工自由选择喜欢的团建活动或福利
          </view>
        </p>
        <view>
          <p>2、使用规则：</p>
          <p class="index">
            A 快乐券是由企业管理员向员工发放
          </p>
          <p class="index">
            B 快乐券可以用于兑换力马嗨商城中全品类商品或者服务
          </p>
          <p class="index">
            C 快乐券支付成功即可抵扣，不补差价，不找零
          </p>
          <p class="index">
            D 订单取消或者相应售后完成之后，相对应的快乐券自动归还账户
          </p>
        </view>
      </view>
    </popup-layer>
  </view>
</template>

<script>
import popupLayer from 'components/popup-layer/popup-layer.vue';
export default {
	components:{
		popupLayer
	},
	data(){
		return{
			list:[],
			page: {
			  page_size: 10,
			  current_page: 1,
			  count: 0,
			  loading: false,
			  finished: false
			},
			couponNumber: 0
		};
	},
	onShow() {
		this.list = [];
		this.page.current_page = 1;
		this.queryData();
		this.getUserInfo();
	},
	onPullDownRefresh() {
	  this.list = [];
	  this.page.current_page = 1;
	  this.queryData('refresh');
		this.getUserInfo();
	},
	onReachBottom() {
	  if (this.list.length < this.page.count) {
	    this.queryData();
	  }
	},
	methods: {
		// 列表获取
		queryData(status) {
			uni.showLoading({
				title:'加载中'
			});
			this.page.loading = true;
			this.$ajax({
				method: 'get',
				url: '/outing/mobile/coupon/order/listByVo',
				data: {
					...this.page
				}
			}).then(res => {
        if (res && res.data) {
          this.list.push.apply(this.list, res.data);
          this.page.count = res.count;
          this.page.loading = false;
					this.page.current_page += 1
          if (this.list.length >= this.page.count) {
            this.page.finished = true;
          }
          if (status === 'refresh') {
            uni.stopPullDownRefresh();
          }
        }
			}).finally(() => {
				uni.hideLoading();
			});
		},
		getUserInfo() {
			this.$ajax({
			  method: 'get',
			  url: '/outing/mobile/user/userInfo/queryInfo',
			}).then(res => {
				this.couponNumber = res.data.couponNumber || 0;
			});
		}
	}
};
</script>

<style lang="less" scoped>
/deep/ .popup-content{
	background:none !important;
}
.coupon{
	min-height: 100vh;
	background:#F7F9FB;
	.banner{
		width:100%;
		height:677upx;
		position: relative;
		margin-bottom:-280upx;
		background:url('https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/coupon/top.png') no-repeat;
		background-size: contain;
	}
	.title{
		font-size: 34upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin:40upx 0 20upx 20upx;
	}
	.question{
		border-radius:40upx 40upx 0 0;
		padding:40upx 30upx 70upx;
		line-height: 46upx;
		background:#FFF;
		.tit{
			font-size: 32upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin:10upx 0 60upx;
			text-align: center;
		}
		.index{
			padding-left: 26upx;
		}
	}
	.list{
		width:710upx;
		margin:0 15upx;
		background:#FFF;
		padding:20upx;
		li{
			border-bottom: 1px dashed #E8E8E8;
			padding:18upx 4upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 44upx;
			.green{
				font-size: 28upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #03DC6B;
			}
			.red{
				font-size: 28upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF4D00;
			}
		}
	}
	.card{
		position: relative;
		background: linear-gradient(140deg, #FDF5EF 0%, #FCF0E4 100%);
		border-radius: 30upx;
		padding-top:40upx;
		width:710upx;
		margin:0 15upx;
		text-align: center;
		line-height: 40upx;
		.footer{
			border-top:1px solid #F0DBC7;
			width:100%;
			height:84upx;
			line-height: 84upx;
			text-align: left;
			text-indent: 40upx;
			font-size: 24upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #82432B;
		}
		h1{
			font-size: 34upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #814128;
		}
		.info{
			font-size: 22upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #814128;
			margin:4upx 0 40upx 0;
			.count{
				font-size: 22upx;
				margin:0 10upx;
				font-weight: bold;
			}
		}
	}
}
</style>
